<template>
    <div id="order" class="app">
            <div class="divHead">
                <div class="divTitle">
                    <i class="el-icon-arrow-left" @click="goBack"></i>校园送
                </div>
            </div>
            <div class="divBody" v-if="orderList.length > 0">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="getList"
                    >
                    <van-cell v-for="(order,index) in orderList" :key="index" class="item">
                        <div class="timeStatus">
                            <span>{{order.createTime}}</span>
                            <span>{{getStatus(order.status)}}</span>
                            <!-- <span>正在派送</span> -->
                        </div>
                        <div class="dishList">
                            <div v-for="(item,index) in order.orderDetails" :key="index" class="item">
                                <span>{{item.name}}</span>
                                <span>{{item.number}}</span>
                            </div>
                        </div>
                        <div class="result">
                            <span>共{{order.number}} 件商品,实付</span><span class="price">￥{{order.amount}}</span>
                        </div>
                        <div class="btn" v-if="order.status === 4">
                            <div class="btnAgain" @click="addOrderAgain(order)">再来一单</div>
                        </div>
                    </van-cell>
                </van-list>
            </div>
            <div class="divNoData" v-else>
                <div class="divContainer">
                    <img src="../assets/images/no_order.png"/>
                    <div>暂无订单</div>
                </div>
            </div>
        </div>  
</template>

<script>
import {base} from '../assets/js/base'
import router from '@/router'
import{orderAgainApi,orderPagingApi }from '../assets/api/order'
export default {
    name:"order-success",
    data(){
        return {
            paging:{
                page:1,
                pageSize:5
            },
            orderList:[],
            loading:false,
            finished:false
        }
    },
    computed:{},
    created(){
        this.initData()
        base(document,window)
    },
    mounted(){},
    methods:{
        goBack(){
            const url = document.referrer
            //表示是从订单页面跳转过来的
            if(url.includes('success')){
                window.requestAnimationFrame(()=>{
                        router.push('/home')
                })   
            }else{
                history.go(-1)
            }
        },
        initData(){
            this.getList()
        },
        async getList(){
            if(this.finished){
                this.loading = false;
                return
            }
            const res = await orderPagingApi(this.paging)
            console.log(res);
            if(res.data.code === 1){
                this.orderList.push(...res.data.data.records)
                let records = res.data.data.records
                if(records && Array.isArray(records)){
                    records.forEach(item=>{
                        let number = 0
                        item.orderDetails.forEach(ele=>{
                            number += ele.number
                        })
                        item.sumNum = number
                    })
                }
                this.loading = false;
                if(this.paging.page >= res.data.data.pages){
                    this.finished = true;
                }
                this.paging.page = this.paging.page + 1
            }else{
                this.$notify({ type:'warning', message:res.data.msg});
            }
        },
        async addOrderAgain(order){
            const res = await orderAgainApi({id:order.id})
            if(res.data.code === 1){
                window.requestAnimationFrame(()=>{
                    router.push('/home')
                })
            }else{
                this.$notify({ type:'warning', message:res.data.msg});
            }
        },
        getStatus(status){
            let str = ''
            switch(status){
                case 1:
                    str =  '待付款'
                break;
                case 2:
                    str =  '正在派送'
                break;
                case 3:
                    str =  '已派送'
                break;
                case 4:
                    str =  '已完成'
                break;
                case 5:
                    str =  '已取消'
                break;

            }
            return str
        }
    }
 
}
</script>

<style>
@import url(../assets/styles/index.css);
@import url(../assets/styles/order.css);
@import url(../assets/styles/vant.min.css);
</style>